<template>
	<div class="page-mobile">
		<div class="lm-mobile-container">
			<mobile-dialog-header></mobile-dialog-header>
			<div class="bg-container">
				<mobile-dialog-body ref="dialogBody"></mobile-dialog-body>
				<mobile-dialog-footer @scrollToBottom="scrollToBottom"></mobile-dialog-footer>
			</div>
		</div>
	</div>
</template>

<script>
import MobileDialogHeader from '@/components/aia-mobile/mobile-dialog-header.vue'
import MobileDialogBody from '@/components/aia-mobile/mobile-dialog-body.vue'
import MobileDialogFooter from '@/components/aia-mobile/mobile-dialog-footer.vue'
import { mapState, mapMutations } from "vuex"
export default {
	name: 'MobileDialog',
	components: {
		MobileDialogHeader,
		MobileDialogBody,
		MobileDialogFooter
	},
	data() {
		return {
		}
	},
	created() {
		this.setMobileSessionInfo({
			client_id: this.$public.getParamFromURL(window.location.href, 'client_id'),
			client_name: this.$public.getParamFromURL(window.location.href, 'client_name'),
			session_id: this.$public.getParamFromURL(window.location.href, 'session_id')
		})
	},
	mounted() {
		let root = document.documentElement
		root.style = "font-size: 50px;"
	},
	methods: {
		...mapMutations('aia-mobile', ['setMobileSessionInfo']),
		// 滚动到底部
		scrollToBottom() {
			this.$refs.dialogBody.scrollToBottom()
		}
	}
}
</script>

<style scoped lang="scss">
.page-mobile{
	width: 100%;
	height: 100%;
	background: #FBFBFB;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.28rem;
	.lm-mobile-container{
		line-height: 1.2;
		width: 375px;
		height: 667px;
		box-sizing: border-box;
		position: relative;
		.bg-container{
			background-image: url(../../assets/images/mobile-bg.png);
    	background-size: 100%;
			height: calc(100% - 0.88rem);
			display: flex;
			flex-direction: column;
		}
	}
}
</style>